<template>
  <div class="banner">
    <img :src="images[i]" />
    <div class="ctrl">
      <a
      href="javascript:;"
      class="btn prev"
      @click="prev"
      >&lt;</a
      ><a
      href="javascript:;"
      class="btn next"
      @click="next"
      >&gt;</a
      >
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const i = ref(0)
  const images = [
                'https://ts1.tc.mm.bing.net/th/id/OIP-C.qHOiR6Xs89cABPMbe90qCQHaEO?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3g',
                'https://ts3.tc.mm.bing.net/th/id/OIP-C.Jc6ISnWXn6PzYsugmmHzagAAAA?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3',
                'https://k.sinaimg.cn/n/sinakd20110/101/w2048h1253/20201207/588f-keyancw6675991.jpg/w700d1q75cms.jpg'
               ]
  const prev = () => {
  i.value--
  if (i.value <= -1) {
    i.value = images.length - 1
  }
  }
  const next = () => {
  console.log('next')
  i.value++
  if (i.value >= images.length) {
    i.value = 0
  }
}
</script>
<style>
  a {
    text-decoration: none;
    color: #000;
  }
  .banner {
    position: relative;
    width: 1200px;
    height: 337px;
    margin: 150px auto;
  }
  .btn {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-top: -15px;
    font-size: 14px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 50%;
  }
  .btn.prev {
    left: 15px;
  }
  .btn.next {
    right: 15px;
  }
</style>